<template>
  <div>
    <div class='title'>热销推荐</div>
    <ul>
      <!--渲染时根据tag把router-link渲染成li标签 链接地址为动态的-->
      <router-link 
        tag='li'
        :to="'/detail/'+item.id" 
        class='item border-bottom' 
        v-for='item of recommendList' 
        :key='item.id'
      >
        <img class='item-img' :src='item.imgUrl'>
        <div class='item-info'>
          <p class='item-title'>{{item.title}}</p>
          <p class='item-desc'>{{item.desc}}</p>
          <button class='item-button'>查看详情</button>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name:'recomment',
  props:{
    recommendList:Array
  }
}
</script>

<style lang='stylus' scoped>
@import '~styles/mixin.styl'
.title
  margin-top: .1rem
  line-height:.8rem 
  background:#eee 
  text-indent:.2rem
.item
  overflow:hidden
  display:flex
  height:1.9rem
  .item-img
     widows:1.7rem 
     height:1.7rem 
     padding:.1rem 
  .item-info
    flex:1 
    padding:.1rem 
    min-width:0//此处设置了最小宽度之后才能是溢出省略号显示
    .item-title
      line-height:.54rem 
      font-size:.32rem 
      ellipsis()
     .item-desc
        line-height: .4rem
        color: #ccc
        ellipsis()
     .item-button
        line-height:.44rem 
        margin-top:.2rem
        background:#ff9300 
        padding:0 .2rem 
        border-radius:.09rem 
        color:#fff
</style>